// 实现标签页的切换功能
function initSwitchTab() {
    // 1,先获取相关的元素(标签页的按钮，会话列表，好友列表)
    let tabSession = document.querySelector('.tab .tab-session');
    let tabFriend = document.querySelector('.tab .tab-friend');
    // lists得到的数组，lists[0]为会话列表，lists[1]为好友列表
    let lists = document.querySelectorAll('.lists');
    // 2,针对标签页按钮，注册点击事件
    tabSession.onclick = function(){
        // 2.1，设置图标
        tabSession.style.backgroundImage = 'url(../img/对话.png)';
        tabFriend.style.backgroundImage = 'url(../img/用户2.png)';
        // // 2.2，设置隐藏
        lists[0].classList = 'lists';
        lists[1].classList= 'lists hide';
    }

    tabFriend.onclick = function(){
        // 2.1，设置图标
        tabSession.style.backgroundImage = 'url(../img/对话2.png)';
        tabFriend.style.backgroundImage = 'url(../img/用户.png)';
        // // 2.2，设置隐藏
        lists[0].classList = 'lists hide';
        lists[1].classList = 'lists';
    }
}

initSwitchTab();



/////////////////////////////////
// 初始化WebSocket
/////////////////////////////////

// 1,创建 websocket 实例
let websocket = new WebSocket("ws://localhost:8080/WebSocketMessage");

websocket.onopen = function(){
    console.log("websocket 连接成功！");
}

websocket.onmessage = function(e){
    console.log("websocket 收到消息！" + e.data);
    // 此时收到的e.data是个json字符串，需要转换为js对象
    let resp = JSON.parse(e.data);
    if(resp.type == 'message'){
        // 格式正确，处理消息响应
        handleMessage(resp);
    }else{
        // 格式错误，输出错误信息
        console.log("resp.type 格式不符合要求！");
    }
}

websocket.onerror = function(){
    console.log("websocket 连接异常！");
}

websocket.onclose = function(){
    console.log("websocket 连接关闭！");
}

function handleMessage(resp){
    // 将客户端接收到的响应展示出来
    // 1，根据响应中的sessionId获取到指定的会话栏SessionDiv
    let curSessionDiv = findSessionDiv(resp.sessionId);
    // 2，如果会话栏不存在，则创建一个新的会话栏
    if(curSessionDiv == null){
        curSessionDiv = document.createElement('div');
        curSessionDiv.setAttribute('message-session-id',resp.sessionId);
        curSessionDiv.className = 'list';
        let curSessionAvatar = document.createElement('div');
        curSessionAvatar.className = 'session-left';
        curSessionAvatar.id = 'session-avatar';
        curSessionAvatar.innerHTML = '<img src="img/5.webp" alt="">';
        curSessionDiv.appendChild(curSessionAvatar);
        let curSessionInfo = document.createElement('div');
        curSessionInfo.className = 'session-right';
        curSessionInfo.id = 'session-info';
        curSessionInfo.innerHTML = '<h3>' + resp.fromName + '</h3>'
        + '<p>'  + '</p>';
        curSessionDiv.appendChild(curSessionInfo);
        // 针对 SessionDiv 新增 点击事件
        curSessionDiv.onclick = function(){
            clicksession(curSessionDiv);
        }

    }
    // 3，把新的消息展示到会话预览部分，并对新的消息进行截断操作
    let p = curSessionDiv.querySelector('.session-right p');
    p.innerHTML = resp.content;
    if(p.innerHTML.length > 10){
        p.innerHTML = p.innerHTML.substring(0,10) + '...';
    }

    // 4，把新的会话放到会话列表最前面
    let sessionDivList = document.querySelector('#session-list');
    sessionDivList.insertBefore(curSessionDiv,sessionDivList.children[0]);

    // 5，若当前收到消息的会话处于被选中的状态，则把当前的消息展示到右侧信息列表
    if(curSessionDiv.className == 'list selected'){
        let messageShowDiv = document.querySelector('.right .message-show');
        addMessage(messageShowDiv,resp);
        // 6，新增消息的同时注意调整滚动条的位置，保证新消息能被用户看到
        scrollBottom(messageShowDiv);
    }
}

function findSessionDiv(targetSessionId){
    let sessionDivList = document.querySelectorAll('.left #session-list .list');
    for(let sessionDiv of sessionDivList){
        let sessionId = sessionDiv.getAttribute("message-session-id");
        if(sessionId == targetSessionId){
            return sessionDiv;
        }   
    }
    return null;
}



/////////////////////////////////
// 实现消息发送/接收逻辑
/////////////////////////////////

function initSendButton(){
    // 1.获取到发送按钮和消息输入框
    let sendButton = document.querySelector('.right .ctrl button');
    let messageInput = document.querySelector('.right .message-input textarea');
    // 2.给发送按钮注册点击事件、
    sendButton.onclick = function() {
        // 2.1，针对消息输入框中的内容进行执行结束操作
        if(!messageInput.value){
            // a)若输入框内容为空就触发
            return;
        }
        // b)若输入框内容不为空就执行下述操作
        // 2.2，获取当前选中会话的会话SessionId
        let selectSessionDiv = document.querySelector('.left .lists .selected');
        if(selectSessionDiv == null){
            // 当前没有会话被选中执行结束操作
            return;
        }
        let sessionId = selectSessionDiv.getAttribute('message-session-id');
        // 2.3，构造 json 数据
        let req = {
            type: 'message',
            sessionId: sessionId,
            content: messageInput.value
        };
        // 2.4，通过websocket 发送消息
        // 注意：websocket.send()的参数应为String类型
        // 而构造的req为Object类型，故此需手动将req转换为String
        req = JSON.stringify(req);
        console.log("[websocket] send: " + req);
        websocket.send(req);
        // 2.5，清空消息输入框
        messageInput.value = '';
    }
}

initSendButton();

/////////////////////////////////
// 从服务器获取登录用户
/////////////////////////////////

function getUserInfo(){
    jQuery.ajax({
        url:"/user/userInfo",
        type:"GET",
        success: function(res) {
            // 从服务器获取到数据.
            if (res.data != null && res.data.user_id > 0) {
                // 如果结果有效, 则把用户名显示到界面上.
                // 同时也可以记录 userId 到 html 标签的属性中. (以备后用)
                let userDiv = document.querySelector('.main .left .user');
                let avatarDiv = document.querySelector('.main .left .user .avatar-img');
                let usernameDiv = document.querySelector('.main .left .user .user-name');
                avatarDiv.innerHTML = '<img src="../img/4.webp" alt="">';
                usernameDiv.innerHTML = res.data.username;
                userDiv.setAttribute("user-id", res.data.user_id);
            } else {
                // 如果结果无效, 当前未登录! 则跳转到登录页面.
                alert("当前用户未登录!");
                location.assign('login.html');
            }
        }
    });
}

getUserInfo();

// 获取好友列表
function getFriendList(){
    jQuery.ajax({
        url:"/friendList",
        type:"GET",
        success:function(res){
            if(res.code == 200){
                // 1，先把之前的好友列表清空，再获取
                let friendList = document.querySelector('#friend-list');
                friendList.innerHTML = "";
                for(let friend of res.data){
                    let friendDiv = document.createElement('div');
                    friendDiv.className = 'list';
                    friendDiv.setAttribute('friend-id',friend.friendId);
                    friendList.appendChild(friendDiv);
                    let friendAvatar = document.createElement('div');
                    friendAvatar.className = 'friend-left';
                    friendAvatar.setAttribute('id','friend-avatar');
                    friendAvatar.innerHTML = '<img src="img/5.webp" alt="">';
                    friendDiv.appendChild(friendAvatar);
                    let friendName = document.createElement('div');
                    friendName.className = 'friend-right';
                    friendName.id = 'friend-name';
                    friendName.innerHTML = '<h3>' + friend.friendName + '</h3>';
                    friendDiv.appendChild(friendName);
                    // 每个friendDiv对应界面上的一个好友选项，给其加上点击事件
                    friendDiv.onclick = function(){
                        clickFriend(friendDiv);
                    }
                }
            }else{
                console.log("获取好友列表失败！");
            }
        },
        error:function(){
            console.log("获取好友列表失败！");
        }
    });
}

getFriendList();


// 点击好友选项触发的函数
function clickFriend(friend){
    // console.log(friend);
    // 1，判断当前这个好友是否有对应的会话
    // 返回值为一个Div标签，找到了就返回对应会话列表页的SessionDiv，未找到就返回null
    let friendName = friend.querySelector('#friend-name>h3').innerHTML;
    // console.log(friendName);
    let sessionDiv = findSessionByName(friendName);
    let sessionList = document.querySelector('#session-list');
    if(sessionDiv != null){
        // 2，如果存在匹配的结果，就把这个会话设置选中状态，并置顶
        sessionList.insertBefore(sessionDiv,sessionList.children[0]);
        sessionDiv.click();
    }else{
        // 3，如果不存在匹配结果，就创建新会话(创建sessionDiv标签+通知服务器)，并置顶
        sessionDiv = document.createElement('div');
        sessionDiv.className = 'list';
        sessionList.appendChild(sessionDiv);
        let sessionAvatar = document.createElement('div');
        sessionAvatar.className = 'session-left';
        sessionAvatar.setAttribute('id','session-avatar');
        sessionAvatar.innerHTML = '<img src="img/5.webp" alt="">';
        sessionDiv.appendChild(sessionAvatar);
        let sessionInfo = document.createElement('div');
        sessionInfo.className = 'session-right';
        sessionInfo.id = 'session-info';
        sessionInfo.innerHTML = '<h3>' + friendName + '</h3>'
        + '<p>' + '' + '</p>';
        sessionDiv.appendChild(sessionInfo);
        sessionList.insertBefore(sessionDiv,sessionList.children[0]);
        // 新增的sessionDiv会话无点击事件
        sessionDiv.onclick = function(){
            clicksession(sessionDiv);
        }
        sessionDiv.click();
        // 发送消息给服务器，告知服务器当前创建的会话是啥样
        let friendId = friend.getAttribute("friend-id");
        // console.log(friendId);
        createSession(friendId,sessionDiv);
    }
    // 4，把标签切换至会话列表页
    let sessionTab = document.querySelector('.left .tab .tab-session');
    sessionTab.click();
}

function createSession(friendId,sessionDiv){
    jQuery.ajax({
        url:"addMessageSession?toUserId=" + friendId,
        type:"POST",
        success: function(res){
            console.log("会话创建成功! sessionId = " + res.data.sessionId);
            sessionDiv.setAttribute('message-session-id',res.data.sessionId);
        },
        error:function(){
            console.log("会话创建失败！");
        }
    });
}

function findSessionByName(friendName){
    let sessionList = document.querySelectorAll('#session-list .list');
    for (let sessionDiv of sessionList){
        // 获取sessionDiv里面的sessionInfo中的h3标签
        // console.log(sessionDiv);
        let h3 = sessionDiv.querySelector('.session-right>h3');
        // console.log(h3.innerHTML);
        if(h3.innerHTML == friendName){
            return sessionDiv;
        }
            
    }
    return null;
}

// 功能：获取会话列表
function getSessionList(){
    jQuery.ajax({
        url:"/sessionList",
        type:"GET",
        success:function(res){
            if(res.code == 200){
                // 1，清空之前的会话列表
                let sessionList = document.querySelector('#session-list');
                sessionList.innerHTML = "";
                // 2, 遍历响应的数组，针对响应结果构造页面
                for(let session of res.data){
                    // 针对 lastMessage 的长度进行截断处理
                    if( session.lastMessage.length > 10){
                        session.lastMessage = session.lastMessage.substring(0,10) + "...";
                    }
                    let sessionDiv = document.createElement('div');
                    sessionDiv.className = 'list';
                    sessionDiv.setAttribute('message-session-id',session.sessionId);
                    sessionList.appendChild(sessionDiv);
                    let sessionAvatar = document.createElement('div');
                    sessionAvatar.className = 'session-left';
                    sessionAvatar.setAttribute('id','session-avatar');
                    sessionAvatar.innerHTML = '<img src="img/5.webp" alt="">';
                    sessionDiv.appendChild(sessionAvatar);
                    let sessionInfo = document.createElement('div');
                    sessionInfo.className = 'session-right';
                    sessionInfo.id = 'session-info';
                    sessionInfo.innerHTML = '<h3>' + session.friends[0].friendName + '</h3>'
                    + '<p>' + session.lastMessage + '</p>';
                    sessionDiv.appendChild(sessionInfo);

                    // 针对 SessionDiv 新增 点击事件
                    sessionDiv.onclick = function(){
                        clicksession(sessionDiv);
                    }
                }
            }else{
                console.log("获取会话列表失败！");
            }
        },
        error:function(){
            console.log("获取会话列表失败！");
        }
    });
}

getSessionList();

// 功能：点击会话
function clicksession(currentDiv){
    // 1, 设置高亮 -> 当点击会话时，会话的样式颜色会加深
    let allSessionDiv = document.querySelectorAll('#session-list>.list');
    activeSession(allSessionDiv,currentDiv);

    // 2，获取到指定会话的历史消息
    let sessionId = currentDiv.getAttribute("message-session-id");
    getHistoryMessage(sessionId);
}

// 功能：设置高亮
function activeSession(allSessionDiv,currentDiv){
    for(let sessionDiv of allSessionDiv){
        if(sessionDiv == currentDiv){
            sessionDiv.className = 'list selected';
        }else{
            sessionDiv.className = 'list ';
        }
    }
}

// 功能：获取历史消息
function getHistoryMessage(sessionId){
    // 1，清空右侧界面的titleDiv和messageShowDiv
    let titleDiv = document.querySelector('.right .title');
    titleDiv.innerHTML = "";
    let messageShowDiv = document.querySelector('.right .message-show');
    messageShowDiv.innerHTML = "";
    // 2, 重新设置会话的tittle
    let sessionInfoDiv = document.querySelector('.left .lists .selected .session-right h3');
    if(sessionInfoDiv){
        titleDiv.innerHTML = sessionInfoDiv.innerHTML;
    }
    // 3, 构造消息列表
    jQuery.ajax({
        url:"/getMessages?sessionId=" + sessionId,
        type:'GET',
        success:function(res){
            console.log("获取会话历史消息成功！");
            for(let message of res.data){
                addMessage(messageShowDiv,message);
            }
            // 4，构造消息列表后，控制滚动条，自动滑至最底下
            scrollBottom(messageShowDiv);
        },
        error: function(){
            console.log("获取会话历史消息失败！");
        }
    });

}

function addMessage(messageShowDiv,message){
    // 每个消息行MessageDiv
    let messageDiv = document.createElement('div');
    messageShowDiv.appendChild(messageDiv);
    // 得到用户的username
    let selfUsername = document.querySelector('.left .user .user-name').innerHTML;
    if(selfUsername == message.fromName){
        // 消息为本人发的，消息靠右
        messageDiv.className = 'message message-right';
    }else{
        // 消息为别人发的，消息靠左
        messageDiv.className = 'message message-left';
    }
    messageDiv.innerHTML = '<div class="box">' + '<h4>' +
    message.fromName + '</h4>' + '<p>' + 
    message.content + '</p>' + '</div>';
}


// 控制滚动条，自动滑至底部
function scrollBottom(elem){
    // 1，获取可视区域的高度
    let clientHeight = elem.offsetHeight;
    // 2,获取内容区域的高度
    let scrollHeight = 1000;
    // 3,进行滚动操作，第1个参数为水平方向滚动的尺寸，第2个参数为垂直方向滚动的尺寸
    elem.scrollTo(0,scrollHeight-clientHeight);
}